import React, { Component } from 'react';
import { connect } from 'dva';
import './less/set.less';
import { Alert,Form, Row, Col,Input,Button,AutoComplete,message } from 'antd';

import { selectComAdmin,systemPlatNewsSendVerificationCode,systemPlatNewsVerificationCode } from "../../../services/api";

const FormItem = Form.Item;

@connect(state => ({
  profile: state.profile,
}))

@Form.create()


export default class SetBasic extends Component {
  constructor(props,context){
    super(props,context);
    this.state = {
      administrator: '詹姆斯',
      index: 1,
      confirmDirty: false,
      autoCompleteResult: [],
      phoneValue: '15059095522',//验证测试，手机号
      code: '123456',//测试验证啊，验证码
      getting: false,//获取验证码,判断是否正在获取中,true,正在获取中
      countDown: 60,//倒计时30秒

    }
  }

  componentWillMount = () => {
    this.getComAdmin();
    this.setState({
      phoneValue: this.state.phoneValue.substring(0,3)+"****"+this.state.phoneValue.substring(7,11),
    });
    console.log(this.state.phoneValue);
  };

  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  //获得企业管理员
  getComAdmin = () => {
    selectComAdmin({}).then((data) => {
      //判断获取数据是否为空
      this.setState({
        administrator: data.data[0].name,
        phoneValue: data.data[0].userName,
      });

    });
  };

  timerCount = ()=> {
    //防止重复计算
    if (this.state.countDown != 60) {
      return;
    }

    this.countDownTimeId = setInterval(() => {
      if (this.state.countDown > 0) {
        // console.log(this.state.countDown);
        this.setState((prevState) => ({
          countDown: prevState.countDown - 1
        }));
        if (this.state.countDown == 0) {
          this.setState({
            getting: false,
            countDown: 60,
          });
          clearInterval(this.countDownTimeId);
        }
      } else {
        clearInterval(this.countDownTimeId);
      }
    }, 1000);

  };

  componentWillUnmount = ()=> {
    //离开页面时候,清除计时器
    if (this.countDownTimeId != null || this.countDownTimeId != undefined) {
      clearInterval(this.countDownTimeId);
    }
  };

  // 验证码变化
  checkCode = () => {
    const disableStyle = {
      background: "#f7f7f7",
      marginLeft: 16,
      borderColor: '#d9d9d9'
    };
    const style = {
      marginLeft: 16
    };
    //验证通过,没有获取
    if (!this.state.getting) {
      return (<Button type="primary" style={style} onClick={this.onGetCode} >获取验证码</Button>);
      //验证通过,正在获取
    } else{
      this.timerCount();
      return (<Button type="primary"
                      className="getValid"
                      style={disableStyle}
                      disabled
      >{this.state.countDown}S后重新发送</Button>);
    }
  };

  // 获取验证码
  onGetCode = () =>{
    systemPlatNewsSendVerificationCode({"mobile":this.state.phoneValue}).then((data) => {
      message.success('已发送验证码');
    });
    this.setState({
      getting: true,
    })
  };

  // 点击下一步
  handleSubmit = (e) =>{
    e.preventDefault();
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }
      this.props.setRoute('SetSuccess');
      // systemPlatNewsSendVerificationCode({"mobile":fieldsValue['phoneValue'],"code":fieldsValue['code']}).then((data) => {
      //   //判断获取数据是否为空
      //   this.props.setRoute('SetSuccess')
      // }, (err) => {
      //   message.error('请填写正确的验证码信息');
      // });
    })
  };

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const { getFieldDecorator } = this.props.form;
    const { previewVisible, previewImage, fileList } = this.state;

    return (
      <div className="set">
        <Alert message="换绑主管理员账号，需要验证当前主管理员账号的身份。" type="warning" showIcon />
        <div className="set-form">
          <Form onSubmit={this.handleSubmit}>
            <FormItem
              {...formItemLayout}
              label="当前管理员"
            >
              <span className="ant-form-text">{this.state.administrator}</span>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="手机号码"
            >
              <div style={{ display: 'flex' }}>
                <div style={{ flex: 1 }}>
                  <Input className="set-input" disabled value={this.state.phoneValue} style={{width:400}}/>
                </div>
              </div>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="验证码"
            >
            <Row gutter={8}>
            <Col span={13}>
              {getFieldDecorator('code', {
                rules: [{
                  required: true, message: '请输入验证码',
                }],
              })(
                <Input placeholder="请输入"/>
              )}
              </Col>
            <Col span={11}>
              {this.checkCode()}
            </Col>
          </Row>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label=" "
              colon={false}
            >
              <Button size="large" type="primary" htmlType="submit">
                下一步
              </Button>
            </FormItem>
          </Form>
        </div>
      </div>
    );
  }
}

